<.subheader>
  <:path>
    ~/<.subheader_path_link live_patch to={~p"/endpoints"} team={@team}>endpoints</.subheader_path_link>
  </:path>
  <.render_docs_link {assigns} />
  <.render_access_tokens_link {assigns} />
</.subheader>

<div class="tw-p-4 lg:tw-max-w-[50%] tw-mx-auto">
  <h3 class="tw-text-white">Logflare Endpoints</h3>
  <p>
    Logflare Endpoints are GET JSON API endpoints that run ANSI SQL queries on your
    event data.
    With Endpoints you can integrated queries over your ingested events and integrate your data into an end-user facing application.
  </p>

  <div class="tw-flex tw-gap-4 tw-items-center">
    <a href="https://docs.logflare.app/concepts/endpoints" target="_blank">Documentation</a>
    <.team_link team={@team} patch={~p"/endpoints/new"}>
      <.button variant="primary">
        New endpoint
      </.button>
    </.team_link>
  </div>
</div>

<section class="mx-auto container">
  <ul :for={endpoint <- Enum.sort_by(@endpoints, & &1.name)} class="list-group">
    <li class="list-group-item">
      <.team_link team={@team} patch={~p"/endpoints/#{endpoint.id}"} class="tw-text-white">
        {endpoint.name}
      </.team_link>
      <span class="tw-block tw-text-sm">uuid: {endpoint.token}</span>
      <p :if={endpoint.description} class="tw-pb-0 tw-mb-0 tw-text-sm text-muted">
        {endpoint.description}
      </p>
      <div class="tw-text-sm">
        <span :if={endpoint.enable_auth} title="Auth enabled">
          <i class="fas fa-lock"></i>
        </span>

        <span :if={!endpoint.enable_auth} title="Auth disabled">
          <i class="fas fa-lock-open"></i>
        </span>
        <span>caches: {endpoint.metrics.cache_count}</span>
      </div>
    </li>
  </ul>
</section>
